<template lang="pug">
    div(class="weui-cell")
        div(class="weui-cell__hd" v-if="label")
            label(class="weui-label") {{label}}
        div(class="weui-cell__bd")
            input(class="weui-input"
            :placeholder="placeholder"
            @keyup.enter.stop="change" 
            v-focus
            v-model="inputModel")
</template>
<script>
export default {
  data() {
    return {
      inputModel: "",
      inputTmp: ""
    };
  },
  props: {
    label: { type: String, default: "" },
    placeholder: { type: String, default: "" },
    focus: { type: Boolean, default: false },
    value: { type: String, default: "" }
  },
  model: {
    prop: "value",
    event: "update"
  },
  watch: {
    inputModel(val) {
      this.$emit("update", val);
    },
    value(val) {
      this.inputModel = val;
    }
  },
  methods: {
    change() {
      if (this.inputTmp == this.inputModel) return;
      this.$emit("change", this.inputModel);
      this.inputTmp = this.inputModel;
    }
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
};
</script>
